<template>
  <div class="statistics-container">
    <Resize>
      <template v-slot:left>
        <div class="statistics_l">
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              parentKey: 'siteId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
              reserve: true,
              accordion: true,
            }"
            class="left-table"
            @cell-click="haldleClickSite"
          >
            <vxe-column tree-node field="name" show-overflow>
              <template #default="{ row }">
                <span>
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="verticalalign: text-bottom"
                  />
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.siteName || row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="statistics_r">
          <!-- <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
          <component
            :is="component_name"
            :siteRow="siteRow"
            @changeComponent="changeComponent"
            :checkRowKeys2="checkRowKeys2"
            @openChannel="openChannel"
            ref="component"
          ></component>
        </div>
      </template>
    </Resize>

    <!--  栏目列表 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogCloumn"
      width="450px"
      append-to-body
    >
      <div class="bottom">
        <div class="bottom_l">
          <vxe-toolbar>
            <template #buttons>
              <vxe-radio-button
                v-model="value7"
                :label="true"
                v-if="false"
                :content="value7 ? '全部关闭' : '全部展开'"
                :strict="false"
                size="mini"
                :disabled="!siteRow"
              ></vxe-radio-button>

              <vxe-radio-button
                v-model="selectAll"
                :label="true"
                :content="!selectAll ? '全选' : '取消全选'"
                :strict="false"
                size="mini"
                :disabled="!siteRow"
                class="b-border"
              ></vxe-radio-button>

              <vxe-radio-button
                v-model="menuCheckStrictly"
                :label="true"
                :strict="false"
                content="父子联动"
                size="mini"
                class="b-border"
              ></vxe-radio-button>

              <!-- <vxe-checkbox v-model="menuCheckStrictly" content="父子联动"></vxe-checkbox> -->
            </template>
          </vxe-toolbar>
          <!-- <vxe-button @click="haldleClickSelectAll" size="mini">全选</vxe-button> -->
          <vxe-table
            v-if="dialogCloumn"
            row-key
            row-id="channelId"
            show-overflow
            ref="xTreeChannel"
            border="inner"
            :data="channelList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            :checkbox-config="{
              labelField: 'name',
              showHeader: false,
              checkStrictly: !menuCheckStrictly,
              checkRowKeys: checkRowKeys2,
              checkMethod,
              trigger: 'default',
            }"
            class="left-table"
          >
            <!-- 要用rightList.length判断。不能使用siterow -->
            <vxe-column type="checkbox" tree-node show-overflow>
              <template #title="{ row }">
                <span>
                  <span style="cursor: pointer; fontsize: 12px; color: #000"
                    >{{ siteRow.name }} 下的栏目列表
                  </span>
                  <span style="float: right; margin: 0 10px 0 0"
                    >已选择
                    {{ $refs.xTreeChannel.getCheckboxRecords().length }}
                    个栏目</span
                  >
                </span>
              </template>
              <template #default="{ row }">
                <span>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cacle">取 消</el-button>
        <el-button type="primary" @click="sureQuery">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  totalInfo,
  countNumByAuthor,
  countNumByAuthorBymonth,
  countNumByAuthorByAll,
  totalInfoByTime,
} from "@/api/extendApplication/statistics.js";
import { getChannelListForTree } from "@/api/content/clounm";

import { editsite, addSite, listSite, publicSite } from "@/api/content/net";
import Home from "./home.vue";
import Null from "./null.vue";

import ArticleDetail from "./table/article_num_list.vue";
import ArticleNum from "./table/article_num.vue";
import Shenggongsi from "./table/shenggongsi.vue";
import Yixianfengcai from "./table/yixianfengcai.vue";

import { mapState } from "vuex";
export default {
  name: "Statistics_new",
  inject: ["city_name"],
  data() {
    return {
      // 日期范围
      dateRange: ["2022-6-1", "2022-6-13"],
      //切换不同的表格
      a: null,
      component_name: "null",
      //信息统计基本信息
      info: [],
      //左侧站点列表
      siteList: [],
      //当前站点行
      siteRow: null,

      // 全选
      selectAll: false,
      // 父子联动
      menuCheckStrictly: false,
      //全部展开 全部关闭
      value7: false,
      channelList: [],
      // 弹出层标题
      title: "",
      // 文章移动  文章复制
      dialogCloumn: false,
    };
  },

  components: {
    Null,
    Home,
    ArticleDetail,
    ArticleNum,
    Shenggongsi,
    Yixianfengcai,
  },

  computed: {
    ...mapState({
      checkRowKeys2: (state) => state.statistics.channelIds,
    }),
  },

  mounted() {
    this.getSiteList();
  },
  watch: {
    value7(value) {
      if (value) {
        this.$refs.xTreeChannel.setAllTreeExpand(true);
      } else {
        this.$refs.xTreeChannel.clearTreeExpand();
      }
    },
    selectAll(value) {
      if (value) {
        this.menuCheckStrictly = true;
        this.$nextTick(() => {
          this.dialogCloumn && this.$refs.xTreeChannel.setAllCheckboxRow(true);
        });
      } else {
        this.dialogCloumn && this.$refs.xTreeChannel.setAllCheckboxRow(false);
        this.$nextTick(() => {
          this.menuCheckStrictly = false;
        });
      }
    },
  },
  methods: {
    //获取站点列表
    getSiteList() {
      this.a = 0;
      this.siteRow = undefined;

      listSite()
        .then((res) => {
          this.siteList = [
            { name: "WYCMS主站", root: "000", children: res.data },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },

    //点击站点
    haldleClickSite({ row }) {
      if (row.root == "000") {
        this.component_name = "null";
        return;
      }
      this.siteRow = row;

      this.$store.dispatch("column/setSiteRow", row);
      this.$store.dispatch("statistics/setChannelIds", []);
      this.$store.dispatch("statistics/setStaticsQuery", {});
      this.component_name = "home";
      this.getChannelList();
      // totalInfoByTime(
      //   this.addDateRange({ siteId: row.siteId }, this.dateRange)
      // ).then((res) => {
      //   this.a = 0;
      //   this.info = res.data;
      // });
      return;
      totalInfo({ siteId: row.siteId }).then((res) => {
        this.a = 0;
        this.info = res.data;
        this.component_name = "home";
      });
    },
    changeComponent(name, activeTabName) {
      this.component_name = name;
      this.$nextTick(() => {
        this.$refs.component.activeName = activeTabName;
      });
    },
    // 子调父 打开对话框
    openChannel() {
      this.selectAll = false;

      this.dialogCloumn = true;

      this.title = "选择栏目";
      //展开第一个节点
      this.$nextTick(() => {
        //展开第一个节点
        this.$refs.xTreeChannel.setTreeExpand(this.channelList[0], true);
        //展开所有节点
        // this.$refs.xTree.setAllTreeExpand(true);
        // this.columnRow && this.$refs.xTree.setCurrentRow(this.columnRow);
      });
    },
    //获取栏目列表
    getChannelList() {
      getChannelListForTree({ siteId: this.siteRow.siteId })
        .then((res) => {
          this.value7 = false;
          this.channelList = this.handleTree(res.data, "channelId").filter(
            (item) => item.parentId == this.siteRow.siteId
          );
        })
        .then(() => {});
    },
    //确认  统计栏目列表
    sureQuery() {
      let selection = this.$refs.xTreeChannel.getCheckboxRecords();
      this.channelIdsTotal = selection.length;

      let channelIds = selection.map((item) => item.channelId);
      this.$store.dispatch("statistics/setChannelIds", channelIds);
      this.cacle();
    },

    cacle() {
      this.dialogCloumn = false;
    },
    //复选框方法，disable第一行的
    checkMethod({ row }) {
      return row.channelId && row.channelId != this.channelId;
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.statistics-container {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  position: relative;
  border: 1px solid #ccc;
  .statistics_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }
  .statistics_r {
    overflow: hidden;
    width: 100%;
    // padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;
  }
}

.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;
  .bottom_l {
    // overflow: auto;
    flex: 1;
    height: 100%;
    // background: #fffbf0 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
    }
  }
}
</style>
